<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-color: #6366f1;
    }

    *{
      box-sizing: border-box;
    }
    html,body {
      height: 100%;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
    }

    .welcome-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 2.5rem;
      background-color: white;

      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      text-align: center;
    }

    .welcome-icon {
      font-size: 4rem;
      color: var(--primary-color);
      margin-bottom: 1.5rem;
    }

    .welcome-title {
      margin-bottom: 1.5rem;
      color: #1e293b;
      font-weight: 600;
    }

    .welcome-message {
      font-size: 1.1rem;
      color: #64748b;
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    .card-container{
      flex: 1;
    }
    .feature-card {
      background-color: white;
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      height: 100%;
      border-left: 4px solid var(--primary-color);
    }

    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .feature-icon {
      font-size: 2rem;
      color: var(--primary-color);
      margin-bottom: 1rem;
    }

    .feature-title {
      font-weight: 600;
      margin-bottom: 0.75rem;
      color: #1e293b;
    }

    .feature-desc {
      color: #64748b;
      font-size: 0.95rem;
    }
  </style>
</head>
<body>
<div class="welcome-container">
  <div class="welcome-icon">
    <i class="fas fa-smile"></i>
  </div>
  <h1 class="welcome-title">Welcome to Simply Rugby!</h1>
  <p class="welcome-message">You can access various functional modules through the left menu.</p>

  <div class="row g-4 mt-4 card-container">
    <div class="col-md-6">
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fas fa-user"></i>
        </div>
        <h4 class="feature-title">User Management</h4>
        <p class="feature-desc">管理系统用户账户，设置角色和权限，监控用户活动。</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fas fa-user-tag"></i>
        </div>
        <h4 class="feature-title">Role Management</h4>
        <p class="feature-desc">定义不同角色的权限级别，精确控制用户访问权限。</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fas fa-dumbbell"></i>
        </div>
        <h4 class="feature-title">训练管理</h4>
        <p class="feature-desc">创建和管理训练计划，跟踪训练进度和成果。</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fas fa-trophy"></i>
        </div>
        <h4 class="feature-title">比赛管理</h4>
        <p class="feature-desc">组织比赛活动，管理参赛者，记录比赛结果。</p>
      </div>
    </div>
  </div>
</div>

<!-- Font Awesome JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
</body>
</html>